<template>

  <div>御剑乘风来,除魔天地间!===首页
     <el-button type="primary" @click="btn">使用sync修饰符</el-button>
     <hr>
     <dia:visible.sync="dialogVisible">
  </div>
</template>
<script>
/*
目的：点击 使用sync修饰符 按钮  实现一个对话框的显示，需要使用sync来实现
封装一个对话框的组件

总体步骤：
1-定义一个子组件dia.vue 显示在父组件中
2-父组件向子组件传递一个值  bool值
3-子组件接受这个bool值
4-子组件更改这个bool值，需要父组件传值的时候添加修饰符.sync
5-子组件需要使用   this.$emit('update:visible', false)来更改传过来的数据

如何实现组件之间双向数据绑定
 */
import dia from './dia.vue'
export default {
  name: '',
  components: { dia },
  data() {
    return {
      dialogVisible: false
    }
  },
  created() {},
  computed: {},
  methods: {
    btn() {
      // 显示对话框
      this.dialogVisible = !this.dialogVisible
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
<style lang='less'  scoped>
</style>
